<template>
  <div>
    <template>
      <div style="border-radius:5px;">
        <tksoperate
          ref="userOperate"
          :is-show-two="true"
          :table-name="tableName"
          :querys="querys"
          :cols="cols"
          :drop-cols="dropCols"
          :dicts="dicts"

          @change="change"
          @getData="getUserData"
          @toAdd="add"
          @batchDelete="batchDelete"
          @downloadFile="downloadFile"
        />
      </div>
    </template>

    <div v-loading="loading">
      <tkstable
        ref="userTable"
        :table-name="tableName"
        :table-config="tableConfig"
        :table-cols="cols"
        :drop-cols="dropCols"
        :table-data="tableData"
        :dicts="dicts"
        :total-num="totalNum"
        :var-change="varChange"

        @getData="getUserData"
        @change="change"
      />
    </div>
    <el-dialog :title="addOrEdit?'新增':'修改'" :visible.sync="dialog" width="500px" padding-right="100px">
      <tksform
        :add-or-edit="addOrEdit"
        :form="form"
        :cols="cols"
        :dicts="dicts"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialog=false">取消</el-button>
        <el-button type="primary">确认</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="'导入数据'" width="400px" padding-right="100px">
      <el-upload
        class="upload-demo"
        drag
        action="http://182.92.123.55:8020/user/upload"
        multiple
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传xlsx/xls</div>
      </el-upload>
    </el-dialog>

  </div>

</template>

<script type="text/ecmascript-6">
import tkstable from './table.vue'
import operate from './operate.vue'
import tksform from './form.vue'
import {initTableConfig, initFieldConfig, initDict, getTableData, handlerConfig, handlerData, batchDel} from './common.js'

export default {
  data() {
    return {
      activeName: 'first',
      tableName: 'user',
      tableConfig: {},
      mergeMapping: null,
      querys: [{type:'',value:''}],
      cols: [],
      dropCols: [],
      dicts: {},
      sels: [],
      tableData: [],
      loading: true,
      currentPage: 1,
      pageSize: 10,
      totalNum: 0,
      params:{},
      map: {},
      varChange: {},
      addOrEdit: true,
      dialog: false,
      form: {},
    }
  },
  methods: {
    initTableConfig(data) {
      if (data && data.pages) {
        const pageSize = data.pages.split(',').map(Number)[0]
        this.pageSize = pageSize
      }
      this.tableConfig = data
    },
    initTable(data) {
      // this.querys = this.filterQuerys(data)
      const data_ = handlerConfig(data,this.initMergeMapping)
      this.cols = this.filterCols(JSON.parse(JSON.stringify(data_)))
      this.dropCols = this.filterDropCols(JSON.parse(JSON.stringify(data_)))
    },
    initMergeMapping(data) {
      this.mergeMapping = data
    },
    initDicts(data) {
      this.dicts = this.filterDicts(data)
    },
    initTableData(data) {
      // 处理表数据
      this.tableData = handlerData(data.content,this.mergeMapping)
      // 处理表数据总数
      this.totalNum = data.totalElements
      // 请求之后，表格去掉加载
      // this.$refs.userTable.loading = false
      this.loading = false
    },
    filterCols(data) {
      return data
    },
    filterDropCols(data) {
      return data
    },
    filterDicts(data) {
      return data
    },
    add() {
      this.addOrEdit = true
      this.dialog = true
    },
    // 得到表格数据
    getUserData() {
      // 请求之前，先给表格加上加载样式
      this.loading = true
      this.tableData = []
      getTableData(this.tableName, this.params, this.map, this.initTableData)
    },
    // 组件名称
    change(name, value) {
      if (this.varChange.name == name) {
          const varChange = {'name':name, 'count':this.varChange.count+1}
          this.varChange = varChange
      } else {
          const varChange = {'name':name, 'count':0}
          // 当对象只是里面的属性变更时，传递给子组件的props值是无法被watch监听到的，所以需要重新改变对象引用
          this.varChange = varChange
      }
      if (name == 'sels') {
          this.sels = value
          this.$refs.userOperate[name] = value
      /*} else if (name == 'cols' || name == 'dropCols') {
          this[name] = value*/
      } else if (name == 'cols') {
          this.cols = value
      } else {
          this[name] = value
      }

    },
    // 批量删除
    batchDelete() {
      var ids = this.sels.map(item => item.id).join()// 获取所有选中行的id组成的字符串，以逗号分隔
      batchDel(this.tableName, ids, (data)=>{
          this.tableData = this.tableData.filter(item => (',' + ids + ',').search(',' + item.id + ',') === -1)
      })
    },
    downloadFile(type,name) {

    }
  },
  components: {
    tkstable: tkstable,
    tksoperate: operate,
    tksform: tksform
  },

  mounted() {
    initTableConfig(this.tableName, this.initTableConfig)
    initFieldConfig(this.tableName,this.initTable)
    initDict(this.tableName,this.initDicts)
    this.params = {'currentPage':this.currentPage, 'pageSize':this.pageSize}
    getTableData(this.tableName, this.params, this.map, this.initTableData)
  },

  computed: {

  },
  watch: {

  }
}
</script>

<style>

</style>
